<template>
  <div class='page'>
    <el-card>
      <el-form :inline="true"
               :model="formData"
               class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formData.user"
                    placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select v-model="formData.state"
                     placeholder="审批状态">
            <el-option v-for="(item,index) in stateObj"
                       :key="index"
                       :label="item"
                       :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary"
                     @click="handleSearch">查询</el-button>
          <el-button type="danger"
                     v-show="user.token"
                     @click="handleLogOut">退出登录</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="date"
                         align="center"
                         label="日期">
        </el-table-column>
        <el-table-column prop="name"
                         align="center"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="number"
                         align="center"
                         label="申请数量">
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="地址">
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="审批状态">
          <template slot-scope="scope">
            <span>
              {{stateObj[scope.row.state]}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="handleRemove(scope.row,scope.$index)"
                       type="danger"
                       size="mini">删除</el-button>
            <el-button @click="handleDetail(scope.row,scope.$index)"
                       size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        user: '',
        state: ''
      },
      tableData: [],
      stateObj: {
        "1": "未审批",
        "2": "审批中",
        "3": "审批通过",
        "4": "审批失败",
      }
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  mounted() {
    this.getTable()
  },
  methods: {
    getTable() {
      if (!this.user.token) {
        this.$message.warning("请登录查看列表")
        return
      }
      this.tableData = this.$store.state.tableData
    },
    handleRemove(item, index) {
      this.tableData.splice(index, 1)
      this.$store.commit("setTable", this.tableData)
    },
    handleDetail(item) {
      this.$router.push(`/detail/${item.id}`)
    },
    handleSearch() {
      if (!this.user.token) {
        this.$alert('请先登录再查看列表', '提示')
        return
      }
      this.getTable()
    },
    handleLogOut() {
      this.$confirm('确定退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$actions.setGlobalState({
          user: {
            name: '',
            head: '',
            token: ''
          },
        });
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.el-card {
  width: 90%;
  padding: 20px;
  min-height: 500px;
  margin: 0 auto;
}
</style>